<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="referrer" content="no-referrer"/>
    <link th:href="@{/css/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap-3.3.7-dist/css/bootstrap-theme.css}" rel="stylesheet">
    <link th:href="@{/css/blog.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/js/jquery-3.0.0.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.0.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<!--    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/npm.js}"></script>-->
    <style type="text/css">
    </style>
</head>
<body style="background-color: #F2F2F2">
<!--页头-->
<div th:fragment="header">
    <nav class="navbar navbar-inverse m-padded-tb-mimi">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Blog</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a th:href="@{/}"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>首页</a></li>
                    <li><a th:href="@{/head/types/-1}"><span class="glyphicon glyphicon-tint" aria-hidden="true"></span>分类</a></li>
                    <li><a th:href="@{/head/tags/-1}"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span>标签</a></li>
                    <li><a th:href="@{/head/archives}"><span class="glyphicon glyphicon-th" aria-hidden="true"></span>归档</a></li>
                    <li><a th:href="@{/head/about}"><span class="glyphicon glyphicon-italic" aria-hidden="true"></span>关于我</a></li>
                </ul>
                <form method="post" class="navbar-form navbar-right" th:action="@{/search}" target="_blank">
                    <div class="form-group">
                        <input type="text" name="query" class="form-control" placeholder="Search..." th:value="${query}">
                    </div>
                    <button type="submit" class="btn btn-default">提交</button>
                </form>
                <ul class="nav navbar-nav navbar-right" style="color: lavender">
                    <li th:if="${session.user}==null"><a th:href="@{/admin}" target="_blank"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>登录</a></li>
                    <li th:if="${session.user}!=null">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                    <img th:src="@{/image/pikaqiu.jpg}" class="img-circle avatar" style="height: 25px;width: 25px;">&nbsp;
                                    <span th:text="${session.user.username}"></span>
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a th:href="@{/admin/logout}">注销</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<!--内容-->
<div>
    <div class="container">
        <div class="row">
            <!--        左边-->
            <div class="col-md-9">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <span class="panel-title">博客</span>
                        <span class="panel-title" style="float: right">
                            共&nbsp;<p class="m-inline-block" th:text="${page.totalElements}"></p>&nbsp;&nbsp;篇
                        </span>
                    </div>

                    <div class="panel-body" >
                        <div class="panel panel-default" th:each="blog : ${page.content}">
                            <div class="panel-body">
                                <div class="media">
                                    <div class="media-left media-middle">
                                        <a href="#" th:href="@{/head/blog/{id}(id = ${blog.id})}">
                                            <img class="media-object" src="../image/me.jpg" th:src="@{${blog.firstPicture}}" style="height: 64px;width: 64px">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">
                                            <a href="#" th:href="@{/head/blog/{id}(id = ${blog.id})}" th:text="${blog.title}" target="_blank"></a>
                                        </h4>
                                        <p class="m-text" th:text="|${blog.description}......|"></p>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-md-8">
                                        <img th:src="@{${blog.user.avatar}}"  class="img-circle" style="height: 24px;width: 24px;">&nbsp;
                                        <a th:text="${blog.user.nickname}"></a>&nbsp;&nbsp;
                                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                                          <span class="text-muted" th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></span>&nbsp;&nbsp;
                                        <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                                          <span class="text-muted" th:text="${blog.views}"></span>&nbsp;&nbsp;
                                    </div>
                                    <div class="col-md-4">
                                        <span class="label label-info" th:text="${blog.type.name}">
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel-footer">
                        <nav aria-label="Page navigation" th:if="${page.totalPages}>1">
                            <ul class="pager">
                                <li class="previous">
                                    <a th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}"><span aria-hidden="true">&larr;</span>上一页</a>
                                </li>
                                <li>
                                    第 <span th:text="${page.number}+1"></span> 页  /
                                    总页数 <span th:text="${page.totalPages}"></span>
                                </li>
                                <li class="next">
                                    <a th:href="@{/(page=${page.number}+1)}" aria-label="Next" th:unless="${page.last}">下一页<span aria-hidden="true">&rarr;</span></a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <!--        右边-->
            <div class="col-md-3">
<!--                分类-->
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <span class="panel-title">
                            <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                            分类
                        </span>
                        <span class="panel-title" style="float: right">
                            <a th:href="@{/head/types/-1}"><span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span></a>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div class="list-group" >
                            <a th:href="@{/head/types/{id}(id=${type.id})}" target="_blank" class="list-group-item" th:each="type : ${types}">
                                <span th:text="${type.name}"></span>
                                <span class="badge" style="background-color: #5bc0de" th:text="${#arrays.length(type.blogs)}"></span>
                            </a>
                        </div>
                    </div>
                </div>
<!--                标签-->
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <span class="panel-title">
                            <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
                            标签
                        </span>
                        <span class="panel-title" style="float: right">
                            <a th:href="@{/head/tags/-1}"><span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span></a>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div class="list-group">
                            <a th:href="@{/head/tags/{id}(id=${tag.id})}" target="_blank" class="list-group-item" th:each="tag : ${tags}">
                                <span th:text="${tag.name}"></span>
                                <span class="badge" style="background-color: #d9534f" th:text="${#arrays.length(tag.tags)}">1</span>
                            </a>
                        </div>
                    </div>
                </div>
<!--                最新推荐-->
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <span class="panel-title">
                            <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
                            最新推荐
                        </span>
                        <span class="panel-title" style="float: right">
                            <a th:href="@{/}"><span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span></a>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div class="list-group">
                            <a href="#" th:href="@{/head/blog/{id}(id = ${blog.id})}" target="_blank" class="list-group-item" th:each="blog : ${recommendBlogs}" >
                                <span th:text="${blog.title}"></span>
                                <span class="badge" style="background-color: #F5A9BC">访问
                                <span th:text="${blog.views}"></span>
                                次</span>
                            </a>
                        </div>
                    </div>
                </div>
<!--                二维码-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <span class="panel-title">
                            <span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
                            二维码
                        </span>
                    </div>
                    <div class="panel-body">
                        <img th:src="@{/image/2630208719.png}" class="thumbnail" style="width: 230px;height: 230px;margin: 0 auto"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页尾-->
<div th:fragment="footer">
    <footer class="navbar navbar-inverse">
        <div class="container">
            <div class="row m-footer-padded">
                <div class="col-md-3">
                    <a href="#">
                        <img th:src="@{/image/2630208719.png}" class="thumbnail" style="width: 100px;height: 100px;margin: 0 auto"/>
                    </a>
                </div>
                <div class="col-md-3  m-opacity" id="newBlog-container">
                    <div class="navbar-header" style="color: white;text-align: center" th:fragment="newBlogList">
                        <h4 style="color: white;">最新博客</h4>
                        <p th:each="blog : ${newBlogs}" style="text-align: center">
                            <a th:href="@{/head/blog/{id}(id = ${blog.id})}" target="_blank" th:text="${blog.title}" style="color: white">
                            </a>
                        </p>

                    </div>
                </div>
                <div class="col-md-3  m-opacity">
                    <div class="navbar-header" style="color: white;text-align: center">
                        <h4 style="color: white">联系我</h4>
                        <p>QQ邮箱 : <span th:text="#{index.email}"></span></p>
                        <p>QQ : <span th:text="#{index.QQ}"></span></p>
                    </div>
                </div>
                <div class="col-md-3  m-opacity">
                    <div class="navbar-header" style="color: white;text-align: center">
                        <h4 style="color: white">Blog</h4>
                        <p th:utext="#{index.Blog}">这是我的个人博客，会分享编程、写作、思考相关的内容、希望能对大家有帮助..</p>
                    </div>
                </div>
            </div>
            <br>
            <div class="m-opacity" style="text-align: center;color: white">
                <p>LeiYao : 2020-2021</p>
            </div>
        </div>
    </footer>
</div>
<script type="text/javascript">
    $('.dropdown-toggle').dropdown()
    $("#newBlog-container").load(/*[[@{/footer/newBlog}]]*/"/footer/newBlog")
</script>
</body>
</html>